<template>
  <div :tabindex="subList.length ? 0 : -1" id="dialog-documents" class="dialog-documents m-1">
    <base-virtual-scroller :items="subList" :item-size="40" v-slot="{ item }" @sendTotalHeight="sendTotalHeight">
      <dialog-document :document="item"
                       :searchText="searchText"
                       :allowed="allowed"
                       :document-list="documentList"
                       :allowSelectedFolder="allowSelectedFolder"
                       @docClicked="clickDoc"/>
    </base-virtual-scroller>
  </div>
</template>

<script>
import DialogDocument from './DialogDocument.vue';
import { eventBus } from "../../../eventbus/eventbus";
import BaseVirtualScroller from './BaseVirtualScroller.vue';

export default {
  props: {
    documentList: {
      type: Array,
      default: []
    },
    searchText: String,
    allowed: {
      type: Boolean,
      default: true
    },
    allowSelectedFolder: {
      type: Boolean,
      default: true
    },
  },
  components: {
    "dialog-document": DialogDocument,
    'base-virtual-scroller': BaseVirtualScroller,
  },
  data() {
    return {
      rootCode: "0",
      subList: [],
      updateKey: 0,
    }
  },
  mounted() {
    $('#dialog-documents').focus(() => {
      this.$nextTick(() => {
      })
    });
  },
  methods: {
    getSubList(){
      let list;
      //通过 electricalParam 识别是否为检索出来的电气部件模型, 电气部件模型不需要比对文件夹Code, 直接陈列
      if (!this.documentList[0]?.electricalParam) {
        list = [...this.documentList.filter(doc => doc.folderCode === this.rootCode)];
      } else
      {
        list = [...this.documentList];
      }
      this.subList = list;
    },
    clickDoc(doc, event) {
      this.$emit("docClicked", doc, event);
    },
    sendTotalHeight(value) {
      this.$emit('sendTotalHeight', value);
    }
  },
  watch:{
    documentList: {
      handler() {
        eventBus.emit('resetIdCount');
        this.updateKey++;
        this.getSubList();
      },
      immediate: true
    },
    subList: {
      handler() {
        console.log("SUBLIST: " + this.subList.length);
      },
    },
  }
}
</script>

<style scoped>
  .dialog-documents {
    max-height: 200px;
  }
  
  .nextPage, >>> .nextPage {
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 4px 0;
    color: var(--text-color1);
  }

  .nextPageText, >>> .nextPageText {
    padding: 0 10px;
    border-radius: 3px;
    flex-shrink: 0;
    margin-left: 7px;
    background-color: var(--bg-color3);
    letter-spacing: 2px;
  }
</style>
